<template>
  <div class="tokenWithdrawContent">
    <div class="top">
      <div class="tokenTitle">设置</div>
      <div class="tokenCon">
        显示{{ $tokenName }}提现
        <el-switch v-model="tokenCon" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ccc" />
        <el-button class="addBtn" style="margin-left: 30px;" @click="changeToken">提交</el-button>
      </div>
    </div>
    <div class="formBox">
      <span style="color: rgb(226, 12, 12);">*</span>初始营业额 <el-input v-clearEmoij v-model.trim="initialAmount.value"
        style="width: 230px;margin-right: 20px;" />
      <span style="color: rgb(226, 12, 12);">*</span>初始订单数 <el-input v-clearEmoij v-model.trim="initialOrder.value"
        style="width: 230px;margin-right: 100px;" />
      <span style="color: rgb(226, 12, 12);">*</span>初始通证数 <el-input v-clearEmoij v-model.trim="initialToken.value"
        style="width: 230px;margin-right: 100px;" />
      <el-button class=" submitBtn" @click="servicePhoneBtn">提交</el-button>
    </div>
    <div class="bottom">
      <div class="tokenTitle">用户协议</div>
      <quill-editor ref="myQuillEditor" :agreement.sync="agreement" style="height: 400px; margin-right: 15px" />
      <el-button class="addBtn" @click="changeAgreement">提交</el-button>
    </div>
  </div>
</template>

<script>
import {
  getWithdraw,
  controlWithdraw,
  getAgreement,
  updateAgreement,
} from "@/api/h5";
import { getCompanyConfig, updateCompanyConfig } from "@/api/shop";
import QuillEditor from "@/components/QuillEditor";

export default {
  name: "TokenWithdraw",
  components: {
    QuillEditor,
  },
  data() {
    return {
      agreement: "",
      agreementId: "",
      tokenCon: "0",
      initialAmount: {
        id: '',
        value: ''
      },
      initialOrder: {
        id: '',
        value: ''
      },
      initialToken: {
        id: '',
        value: ''
      },
    };
  },
  created() {
    this.getWithdraw();
    this.getAgreement();
    this.getCompanyConfig();
  },
  methods: {
    async getWithdraw() {
      const res = await getWithdraw();
      if (res.code === 200) {
        this.tokenCon = res.data;
        // console.log(res);
      }
    },
    async getAgreement() {
      const res = await getAgreement();
      if (res.code === 200) {
        this.agreement = res.data.content;
        this.agreementId = res.data.id;
        // console.log(res);
      }
    },
    async changeToken() {
      console.log(this.tokenCon);
      const res = await controlWithdraw({
        id: "1b6290b44d934363a0d019058f348ace",
        name: "会员提现入口状态",
        code: "MEMBER_CASH_STATUS",
        switch_status: this.tokenCon,
      });
      if (res.code === 200) {
        this.$message.success("修改成功");
      }
    },
    onEditorBlur1(quill) {
      // console.log("editor blur!", quill);
      // console.log(this.agreement)
    },
    async changeAgreement() {
      // console.log(this.agreement);
      const res = await updateAgreement({
        id: this.agreementId,
        content: this.agreement,
      });
      if (res.code === 200) {
        this.$message.success("修改成功");
      } else {
        // this.$message.error(res.message);
      }
    },
    // 获取公司初始配置数据
    async getCompanyConfig() {
      const res = await getCompanyConfig()
      if (res.code === 200) {
        console.log('res', res);
        this.initialAmount.id = res.data.initialAmount.id
        this.initialAmount.value = res.data.initialAmount.value
        this.initialOrder.id = res.data.initialOrder.id
        this.initialOrder.value = res.data.initialOrder.value
        this.initialToken.id = res.data.initialToken.id
        this.initialToken.value = res.data.initialToken.value

      }
    },
    async servicePhoneBtn() {
      if (this.initialAmount.value === '' || this.initialOrder.value === '' || this.initialToken === '') {
        this.$message.error('不能为空')
        return
      }
      const reg = /^\+?[0-9]\d*$/
      if (!reg.test(this.initialAmount.value) || !reg.test(this.initialOrder.value) || !reg.test(this.initialToken.value)) {
        this.$message.error('请输入数字')
        return
      }
      const res = await updateCompanyConfig({
        sysSettingList: [
          {
            id: this.initialAmount.id,
            value: this.initialAmount.value
          },
          {
            id: this.initialOrder.id,
            value: this.initialOrder.value
          },
          {
            id: this.initialToken.id,
            value: this.initialToken.value
          }
        ]
      })
      if (res.code === 200) {
        this.$message.success('修改成功')
        this.getCompanyConfig()
      }
    }
  },
};
</script>

<style scoped lang="scss">
.tokenWithdrawContent {
  padding: 20px;

  .top {
    height: 100px;
    background-color: #fff;
    // margin-bottom: 20px;
    padding: 10px;

    .tokenTitle {
      font-size: 18px;
      font-weight: bold;
      /* // width: 15%; */
      width: 150px;
      text-decoration: underline;
      /* // height: 20px; */
      /* // border-bottom: 1px solid #9a9797; */
    }

    .tokenCon {
      padding: 10px;
      // padding-top: 10px;
    }
  }

  .formBox {
    margin-bottom: 30px;
    padding: 10px 10px 10px 20px;
  }

  .bottom {
    background-color: #fff;
    // height: 750px;
    padding: 10px;

    .tokenTitle {
      font-size: 18px;
      font-weight: bold;
      /* // width: 15%; */
      width: 150px;
      margin-bottom: 20px;
      text-decoration: underline;
      /* // height: 20px; */
      /* // border-bottom: 1px solid #9a9797; */
    }
  }
}
</style>
